<template>
	<view>
		<view class="imageContainer" v-for="(item, index) in albumList" :key="index">
			<image class="icon" :src="item.cover" mode=""></image>
			<view class="right">
				<view class="title text-1line-ellipsis">
					{{item.name}}
				</view>
				<sendTiktok 
					:id="item.id"
					:contentType="'video'"
					:title="item.name"
					>				
				</sendTiktok>
			</view>
		</view>
	</view>
</template>

<script>
	const api = require("@/static/js/api.js")
	const utils = require("@/static/js/utils.js")
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex';
	let that = null
	import sendTiktok from "./sendTiktok.vue"

	export default {
		data() {
			return {
				albumList: [],
			};
		},
        components:{
			sendTiktok
		},
		computed: {
			...mapState({
				hasLogin: state => state.userInfo.hasLogin,
				isAuthPhone: state => state.userInfo.isAuthPhone,
				isAuthUserInfo: state => state.userInfo.isAuthUserInfo,
				isSeller: state => state.userInfo.isSeller,
				sellerObj: state => state.userInfo.sellerObj,
				buyerObj: state => state.userInfo.buyerObj,
				shopInfo: state => state.userInfo.shopInfo,
			}),
		},

		created(options) {
			that = this;
			that.getProjectVideos()
		},
		onShow() {

		},
		methods: {
			...mapMutations(['setUserInfo', 'setLoginStatus', 'setUserId', "setOrigin"]),

			getProjectVideos() {
				let that = this
				api.getProjectVideos({
					param: {

					}
				}).then(res => {
					console.log(res)
					if (res.success || (res.code == 0)) {
						that.albumList = res.data
					}
				})
			},
			gotoDetail(item) {
				uni.navigateTo({
					url: './buildingVideoDetail?id=' + item.id
				})
			},
		}
	}
</script>

<style lang="scss">
	.imageContainer {
		width: 100%;
		background: #FFFFFF;
		box-shadow: 2rpx 2rpx 8rpx 4rpx #EEEEEE;
		border-radius: 20rpx;
		padding: 18rpx;
		box-sizing: border-box;
		margin-top: 32rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.icon {
			background-color: #F3F3F3;
			width: 250rpx;
			height: 150rpx;
		}

		.right {
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			width: 300rpx;

			.title {
				font-size: 28rpx;
				color: #666666;
				line-height: 40rpx;
				text-align: center;
				margin-bottom: 30rpx;
			}

			.btn {
				height: 50rpx;
				width: 140rpx;
				border-radius: 30rpx;
				background-color: #007aff;
				color: #ffffff;
				font-size: 22rpx;
				text-align: center;
				line-height: 50rpx;
				margin-left: 20rpx;
				margin-top: 30rpx;
			}
		}

	}
</style>